
@import 'var.scss';
@import 'global.scss';
.singerdetail-container{
    width: 100%;
    // border: $border;
    // padding-top:80px;
    margin-top:80px;
    height: 300px;
    background-color:black;

    .top-container{

        max-width: 1200px;
        min-width: 800px;
        margin: 0 auto;
        height: 100%;
        // border: $border;
        display:flex;
        align-items: center;
        .singer-avater{
            width:200px;
            height: 200px;
            // border: $border;
            border-radius:50%;
            .el-image{
                width:200px;
                height: 200px;
                border-radius: 50%;
            }
        }
        .singer-info{

            flex: 1;
            height: 100%;
            
            // border: $border;
            color: #fff;
            display: flex;
            // flex-direction: column;
            flex-direction: column;
            
            justify-content:center;
            padding-left: 20px;

            .singer-name{
                font-size: 30px;
                // border:$border;
                margin:0;
            }
            .singer-description{
                height: 60px;
                margin:  10px 0;
                padding:0;
                line-height: 30px;
                width: 100%;
                // border: $border;
                overflow:hidden;
                text-overflow:ellipsis;
                -webkit-line-clamp: 2;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                word-break: break-all;
            }
            .singer-follow{
                margin:0;
                list-style:none;
                display:flex;
                align-items: center;
                width:100%;
                height: 50px;
                padding: 0;
                // border: $border;
                .el-divider{
                    height: 30px;
                }
                li{
                    font-size: 18px;
                    margin-right: 10px;
                    span{
                        font-size: 25px;
                    }
                }
            }
            .follow-btn{
                margin-top: 15px;
                width:120px;
                // border:1px solid #fff;
                // color: transparent;
            }

        }
    }

    .singerdetail-nav-container{
        width: 100%;
        height: 100px;
        // border:$border;
        .singerdetail-nav{
            max-width: 1200px;
            min-width: 800px;
            list-style: none;
            padding: 0;
            margin: 0 auto;
            height: 100%;
            display: flex;
            align-items: center;
            // border:$border;
            li{
                margin-right: 15px;
                font-size: 22px;
                cursor: pointer;
            }
            li:first-child{
                font-size: 30px;
            }
            .active{

                
                color:rgb(92,151,238);
                transition: 0.5s;
            }
        }
    }
    
    .singerdetail-content-container{

        width:100%;
       

        .singerdetail-content-wrap{
            max-width: 1200px;
            min-width: 800px;

            // border: $border;
            margin: 0 auto;
            padding-bottom: 200px;
            
            .top-music-wrap{
                width: 100%;
            }
            .detail-wrap{
                width: 100%;
                color:#999;
                line-height:30px;
                // border: $border;
               
            }
            .album-wrap{
                display: flex;
                flex-wrap: wrap;
                justify-content: flex-start;
                
                // border: $border;
               
            }
            .mv-wrap{
                display: flex;
                flex-wrap: wrap;
                justify-content: flex-start;
                // border: $border;
            }
        }
    }
}